<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8">
        <title>实时操作</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" th:href="@{/static/plugin/layui/css/layui.css}" media="all">
        <link rel="stylesheet" th:href="@{/static/plugin/ztree/css/zTreeStyle/zTreeStyle.css}" media="all">
        <link rel="stylesheet" th:href="@{/static/css/dynamiccircle.css}" media="all">
        <link rel="stylesheet" th:href="@{/static/css/layui-icon-extend/iconfont.css}" media="all">

        <style type="text/css">
            html, body {
                height: 1500px;
            }

            .navigation-top {
                border: 1px solid #d99d0c;
                height: 580px;
            }

            .navigation-left {
                float: left;
                width: 30%;
            }

            .navigation-left-top {
                height: 140px;
            }

            .navigation-right {
                float: right;
                width: 70%;
            }

            .navigation-right-top {
                overflow: hidden;
                height: 38px;
                top: 20px;
                right: 20px;
            }

            .navigation-right-top .topnav-left {
                float: left;
                display: block;
                text-align: center;
                padding: 10px 4px;
                text-decoration: none;
            }

            .navigation-right-top .topnav-right {
                float: right;
                display: block;
                color: #f2f2f2;
                text-align: center;
                text-decoration: none
            }

            .navigation-right-bottom {
            }

            /*移到按钮上面，鼠标变成手势*/
            .layui-icon:before {
                cursor: pointer;
            }

            /*table高度自适应*/
            .layui-table-cell {
                height: auto ;
                white-space: normal;
                word-wrap:break-word;
            }

        </style>
    </head>
    <body>

        <!--上部分-->
        <div class="navigation-top" >
            <!--float元素无法设置margin，这里使用dic来间接实现-->
            <div style="margin: 4px;" >
                <!--左-->
                <div class="navigation-left"  >
                    <!--左上-->
                    <div class="navigation-left-top" style="margin-left: 15.2%">
                        <!--圆形动态按钮-->
                        <!--开始启程-->
                        <div class="round" id="circleStart" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background-color: #06e11f">
                                <a href="javascript:void(0);" class="mode-button-click">点击启程</a>
                            </div>
                            <div class="circle_bottom animation " style="background-color: rgba(0,232,0,0.4)"></div>
                            <div class="circle_bottom2 animation2 " style="background-color: rgba(0,232,0,0.66)"></div>
                        </div>
                        <!--航行模式-->
                        <div class="round" id="circleNavigationModeC" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background: #47bae1;">
                                <a href="javascript:void(0);" class="mode-button-click">航行中</a>
                            </div>
                            <div class="circle_bottom animation " style="background: rgba(71,186,225,0.35)"></div>
                            <div class="circle_bottom2 animation2 " style="background: rgba(71,186,225,0.76)"></div>
                        </div>
                        <!--漂浮模式-->
                        <div class="round" id="circleWanderMode" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background-color: #a17ee1">
                                <a href="javascript:void(0);" class="mode-button-click">漂浮中</a>
                            </div>
                            <div class="circle_bottom animation " style="background-color: rgba(161,126,225,0.36)"></div>
                            <div class="circle_bottom2 animation2 "
                                 style="background-color: rgba(161,126,225,0.76)"></div>
                        </div>
                        <!--锚泊模式-->
                        <div class="round" id="circleAnchorMode" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background-color: #e17473">
                                <a href="javascript:void(0);" class="mode-button-click">锚泊中</a>
                            </div>
                            <div class="circle_bottom animation "
                                 style="background-color: rgba(225,116,115,0.36)"></div>
                            <div class="circle_bottom2 animation2 "
                                 style="background-color:  rgba(225,116,115,0.76)"></div>
                        </div>
                        <!--单点循环-->
                        <div class="round" id="circleSingleMode" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background-color: #e18906">
                                <a href="javascript:void(0);" class="mode-button-click">单点循环</a>
                            </div>
                            <div class="circle_bottom animation "
                                 style="background-color: rgba(225,143,6,0.36)"></div>
                            <div class="circle_bottom2 animation2 "
                                 style="background-color: rgba(225,139,6,0.76)"></div>
                        </div>
                        <!--暂停中-->
                        <div class="round" id="circlePause" style="display: none;margin-left: 9.6%">
                            <div class="circle" style="background-color: #b3afb4">
                                <a href="javascript:void(0);" class="mode-button-click" id="circlePauseText">暂停中</a>
                            </div>
                            <div class="circle_bottom animation " style="background-color: rgba(179,175,180,0.36)"></div>
                            <div class="circle_bottom2 animation2 "
                                 style="background-color: #b3afb4"></div>
                        </div>
                    </div>
                    <!--左中-->
                    <div style="padding: 5px; width: 100%;">
                        <!--暂停/继续，停止-->
                        <div style="margin-left: 34%;">
                            <button type="button" class="layui-btn-xs layui-btn-primary" id="pauseOrContinueBtn" style="cursor: pointer;">暂停</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="layui-btn-xs layui-btn-primary" id="stopBtn" style="cursor: pointer;">停止</button>
                        </div>
                    </div>
                    <!--左下-->
                    <div style="margin: 5px;">
                        <div style="height: 20px; margin: 5px">
                            当前模式：
                            &nbsp;
                            <span id="currentModeTxt"></span>
                        </div>
                        <!--切换模式按钮， icon获取方式见阿里巴巴矢量库https://www.yisu.com/zixun/123186.html-->
                        <div style="margin: 5px; word-break: break-all;word-wrap: break-word;">
                            切换模式：
                            &nbsp;
                            <!--航行模式-->
                            <button id='startModeNavigationBtn' type="button" class="layui-btn-xs layui-btn-primary" style="font-size: 14px;cursor: pointer;border-radius: 5px;margin-top: 4px;" onmouseover="show_tips_mode(this, '航行模式', '#47bae1')">航行</button>
                            &nbsp;
                            <!--锚泊模式-->
                            <button id='startModeAnchorBtn' type="button" class="layui-btn-xs layui-btn-primary"  style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '锚泊模式（自动选择的是航线表状态为正在发送的点位，没有正在发送的话就是选择第一个等待发送的点位）', '#e17473')">锚泊</button>
                            &nbsp;
                            <!--手动选择点位后再进行锚泊-->
                            <button id='startModeAnchorByHandBtn' type="button" class="layui-btn-xs layui-btn-primary"  style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '手动设置锚泊点位（该点位不属于航线表）', '#e17473')">手动锚泊</button>
                            &nbsp;
                            <!--漂浮模式-->
                            <button id='startModeWanderBtn' type="button" class="layui-btn-xs layui-btn-primary" style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '漂浮模式（漂浮范围为上次指定的范围，您可以在模式配置中修改）', '#a17ee1')">漂浮</button>
                            &nbsp;
                            <!--手动选择范围后再进行漂浮-->
                            <button id='startModeWanderByHandBtn' type="button" class="layui-btn-xs layui-btn-primary" style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '手动配置漂浮范围', '#a17ee1')">手动漂浮</button>
                            &nbsp;
                            <!--单点循环-->
                            <button id='startModeSingleBtn' type="button" class="layui-btn-xs layui-btn-primary" style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '单点循环（自动选择的是航线表状态为正在发送的点位，没有正在发送的话就是选择第一个等待发送的点位）', '#e18906')">单点</button>
                            <!--手动设置点位后进行单点循环-->
                            <button id='startModeSingleByHandBtn' type="button" class="layui-btn-xs layui-btn-primary" style="font-size: 14px;cursor: pointer;border-radius: 5px; margin-top: 4px;" onmouseover="show_tips_mode(this, '手动设置单点循环的点位（该点位不属于航线表，并且该点位与手动锚泊模式指定的点位不相等）', '#e18906')">手动单点</button>
                        </div>
                        <div id="sendDataView" style="margin: 5px">
                            <!--航行模式概览-->
                            <div>
                                当前航向：
                                <a id="courseContent" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></a>
                            </div>
                            <div>
                                当前信息：
                                <a id="displayContent" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></a>
                            </div>
                            <!--串口发送时间-->
                            <div>
                                发送时间：
                                <a id="sendPortTime" style="margin: 5px;word-wrap: break-word;"></a>
                            </div>
                            <!--串口发送数据-->
                            发送内容：
                            <div style="overflow:auto; height: 180px;">
                                <div id="sendGPGLL" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></div>
                                <div id="sendGPRMC" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></div>
                                <div id="sendGPVTG" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></div>
                                <div id="sendGPGGA" style="margin: 5px;word-wrap: break-word;line-height: 20px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--float元素无法设置margin，这里使用dic来间接实现-->
            <div style="margin: 4px;">
                <!--右-->
                <div class="navigation-right">
                    <!--右上-->
                    <div class="navigation-right-top">
                        <div class="topnav-left">
                            航线表
                        </div>
                        <div class="topnav-right">
                            <button type="button" class="layui-btn layui-btn-normal" id="modeConfigButton">模式配置</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="serialPortButton">串口配置</button>
                            <button type="button" class="layui-btn layui-btn-success" id="addRouteButton">新增</button>
                            <button type="button" class="layui-btn layui-btn-success" id="setRouteButton">设定</button>
                            <button type="button" class="layui-btn layui-btn-success" id="importExcelRouteButton">导入</button>
                            <!--真实的导入按钮-->
                            <button type="button" class="layui-btn layui-btn-success" id="importExcelRouteButtonReal" style="display: none;">导入</button>
                            <button type="button" class="layui-btn layui-btn-danger" id="batchDeleteRouteButton">删除</button>
                        </div>
                    </div>
                    <!--右下-->
                    <div class="navigation-right-bottom">
                        <table class="layui-hide" id="currentRouteTable" lay-filter="currentRouteTable"></table>
                    </div>
                </div>
            </div>
        </div>
        <!--下部分-->
        <div class="navigation-bottom">
            <div style="margin: 4px; ">
                当前航程已发送记录
                <table class="layui-hide" id="currentSendDataTable" lay-filter="currentSendDataTable"></table>
            </div>
        </div>


        <input type="text" id="ctx" hidden="hidden" th:value="${#request.getContextPath()}">

        <!--新增/编辑航线表格-->
        <div class="layui-row" id="editRouteForm" style="display:none;">
            <div class="layui-col-md10">
                <form class="layui-form layui-from-pane" action="" style="margin-top:20px; margin-right: 20px">
                    <!--主键id-->
                    <input type="text" id="id" name="id" hidden="hidden">
                    <input type="text" id="preId" name="preId" hidden="hidden">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style='color: red;'>*</span> 纬度类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="latitudeType" lay-filter="latitudeType"
                                   checked value="N" title="北纬">
                            <input type="radio" name="latitudeType" lay-filter="latitudeType"
                                   value="S" title="南纬">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style='color: red;'>*</span> 纬度</label>
                        <div class="layui-input-block">
                            <input type="text" id="latitudeDegree" name="latitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="latitudeMinute" name="latitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                            <div style="float:left;line-height: 38px;">（范围: 0-90度(整数), 0-60分(最多5位小数),1度=60分）</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style='color: red;'>*</span> 经度类型</label>
                        <div class="layui-input-block">
                            <input type="radio" name="longitudeType" lay-filter="longitudeType"
                                   checked value="E" title="东经">
                            <input type="radio" name="longitudeType" lay-filter="longitudeType"
                                   value="W" title="西经">
                        </div>
                    </div>
                    <div class="layui-form-item" style="float:left;">
                        <label class="layui-form-label" style="float:left;">
                            <span style='color: red;'>*</span> 经度
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="longitudeDegree" name="longitudeDegree" required lay-verify="required"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 60px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;度&nbsp;</div>
                            <input type="text" id="longitudeMinute" name="longitudeMinute"
                                   autocomplete="off" placeholder="" class="layui-input" style="width: 90px;float: left">
                            <div style="float:left;line-height: 38px;">&nbsp;分</div>
                            <div style="float:left;line-height: 38px;">（范围: 0-180度(整数), 0-60分(最多5位小数),1度=60分）</div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">速度</label>
                        <div class="layui-input-block">
                            <input type="text" id="speed" name="speed" required
                                   autocomplete="off"
                                   placeholder="单位节，1节=1海里/小时=1.852公里/小时=1.852千米/小时" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" style="margin-top:40px">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn  layui-btn-submit " lay-submit=""
                                    lay-filter="currentRouteConfirm">保存
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" id="back">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <input type="hidden" th:value="${currentMode}" id="currentMode">
        <input type="hidden" th:value="${currentModeStatus}" id="currentModeStatus">
        <input type="hidden" th:value="${currentNavigationId}" id="currentNavigationId">
        <input type="hidden" th:value="${commonCourse}" id="commonCourse">

        <script type="text/html" id="tbBar">
            <!--编辑-->
            <i style="font-size: 24px; color: #298f83;" onmouseover="show_tips(this, '编辑', '#298f83')"
               class="layui-icon layui-icon-edit " lay-event="modify"></i>
            <!--删除-->
            <i style="font-size: 24px; color: #f4577b;" onmouseover="show_tips(this, '删除', '#f4577b')"
               class="layui-icon layui-icon-delete " lay-event="remove"></i>
        </script>

        <script th:src="@{/static/js/jquery.min.js}" charset="utf-8"></script>
        <script th:src="@{/static/plugin/ztree/jquery.ztree.all.min.js}" charset="utf-8"></script>
        <script th:src="@{/static/plugin/layui/layui.js}" charset="utf-8"></script>
        <script th:src="@{/static/js/app.js}" charset="utf-8"></script>
        <script src="/static/js/whysu.js" th:src="@{/static/js/whysu.js}"></script>

        <!--序号自增-->
        <script type="text/html" id="xuhao">
            {{d.LAY_TABLE_INDEX+1}}
        </script>

        <script>
            layui.use(['jquery', 'table', 'layer', "upload"], function () {
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var upload = layui.upload; //声明上传组件
                // 当前模式
                var currentMode = $('#currentMode').val();
                // 当前模式运行状态
                var currentModeStatus = $('#currentModeStatus').val();
                // 当前航程表id
                var currentNavigationId = $('#currentNavigationId').val();
                // 鼠标是否进入发送数据的方块
                var mouseOnSendDataFlag = false;

                //页面一打开就执行
                layer.ready(function () {
                    // 渲染表格
                    layui.form.render();
                    // 绘制当前图标
                    setModeCircle(currentMode, currentModeStatus);
                    // 切换模式
                    setTimeout(function () {
                        // 展示之前的内容
                        js2Java({
                            "method": "winDisplayContent"
                        });
                        // 模式切换
                        js2Java({
                            "method": "winMode"
                        });
                    }, 1000);
                });

                // 当前航线表(不分页)
                table.render({
                    elem: '#currentRouteTable'
                    , url: ctx + '/navigation/getCurrentRouteList'
                    , method: 'post'
                    , contentType: 'application/json'
                    , defaultToolbar: false //去掉右上角的打印等按钮
                    , title: null
                    , loading: true //显示加载条
                    , height: '520' //固定表头，以及设置表格高度
                    , cols: [
                        [
                            {type: 'checkbox'},
                            {title: '序号', templet: '#xuhao', align: 'center', width: 60},
                            {field: 'id', title: 'ID', hide: true},
                            {field: 'latitude', title: '纬度值', hide: true},
                            {field: 'latitudeType', title: '纬度类型', hide: true},
                            {
                                field: 'latitudeDesc', title: '纬度', align: 'center',
                                templet: function (d) {
                                    if (d.latitude == null || d.latitude === '') {
                                        return '';
                                    }
                                    if (d.latitudeType === 'N') {
                                        return d.latitude + '/北纬';
                                    } else if (d.latitudeType === 'S') {
                                        return d.latitude + '/南纬';
                                    } else {
                                        return d.latitude;
                                    }
                                }
                            },
                            {field: 'longitude', title: '经度值', hide: true},
                            {field: 'longitudeType', title: '经度类型', hide: true},
                            {
                                field: 'longitudeDesc', title: '经度', align: 'center',
                                templet: function (d) {
                                    if (d.longitude == null || d.longitude == '') {
                                        return '';
                                    }
                                    if (d.longitudeType === 'E') {
                                        return d.longitude + '/东经';
                                    } else if (d.longitudeType === 'W') {
                                        return d.longitude + '/西经';
                                    } else {
                                        return d.longitude;
                                    }
                                }
                            },
                            {field: 'speed', title: '速度(单位节)', align: 'center'},
                            {
                                field: 'routeState', title: '路线状态', align: 'center',
                                templet: function (d) {
                                    var label = getLabel(DataType.RouteState, d.routeState);
                                    if (d.routeState === 2) {
                                        // 已发送
                                        return "<span style='color: limegreen;'>" + label + "</span>"
                                    } else if (d.routeState === 3) {
                                        // 等待发送
                                        return "<span style='color: cornflowerblue;'>" + label + "</span>"
                                    } else if (d.routeState === 4) {
                                        // 正在发送
                                        return "<span style='color: orangered;'>" + label + "</span>"
                                    }
                                    return label;
                                }
                            },
                            {fixed: 'right', title: '操作', toolbar: '#tbBar'}
                        ]
                    ]
                    , page: false
                    , limit: Number.MAX_VALUE // 数据表格默认全部显示
                    , request: {}
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "data": res.body //解析数据列表
                        };
                    }

                });

                // 当前航线发送记录表（不分页）
                table.render({
                    elem: '#currentSendDataTable'
                    , url: ctx + '/navigationRecord/getLimitRecordList'
                    , method: 'post'
                    , contentType: 'application/json'
                    , defaultToolbar: false //去掉右上角的打印等按钮
                    , title: null
                    , loading: true //显示加载条
                    , cols: [
                        [
                            {title: '序号', templet: '#xuhao', width: 60},
                            {field: 'id', title: 'ID', hide: true},
                            {
                                field: 'createTime', title: '发送时间', align: 'center',
                                templet: function (d) {
                                    if (d.createTime == null) {
                                        return "";
                                    } else {
                                        return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                                    }
                                }
                            },
                            {field: 'latitude', title: '纬度值', hide: true},
                            {field: 'latitudeType', title: '纬度类型', hide: true},
                            {
                                field: 'latitudeDesc', title: '纬度', align: 'center',
                                templet: function (d) {
                                    if (d.latitude == null || d.latitude === '') {
                                        return '';
                                    }
                                    if (d.latitudeType === 'N') {
                                        return d.latitude + '/北纬';
                                    } else if (d.latitudeType === 'S') {
                                        return d.latitude + '/南纬';
                                    } else {
                                        return d.latitude;
                                    }
                                }
                            },
                            {field: 'longitude', title: '经度值', hide: true},
                            {field: 'longitudeType', title: '经度类型', hide: true},
                            {
                                field: 'longitudeDesc', title: '经度', align: 'center',
                                templet: function (d) {
                                    if (d.longitude == null || d.longitude === '') {
                                        return '';
                                    }
                                    if (d.longitudeType === 'E') {
                                        return d.longitude + '/东经';
                                    } else if (d.longitudeType === 'W') {
                                        return d.longitude + '/西经';
                                    } else {
                                        return d.longitude;
                                    }
                                }
                            },
                            {field: 'speed', title: '速度(单位节)', align: 'center'},
                            {field: 'course', title: '航向', align: 'center'},
                            {field: 'sendFailReason', title: '失败原因', hide: true},
                            {
                                field: 'sendStatus', title: '发送结果', align: 'center',
                                templet: function (d) {
                                    var label = getLabel(DataType.SendStatus, d.sendStatus);
                                    if (d.sendStatus === 2) {
                                        // 发送成功
                                        return "<span style='color: green;'>" + label + "</span>"
                                    } else if (d.sendStatus === 3) {
                                        // 发送失败(红色，并带上失败原因)
                                        if (d.sendFailReason != null && d.sendFailReason !== '') {
                                            label = label + "(" + d.sendFailReason + ")";
                                        }
                                        return "<span style='color: red;'>" + label + "</span>"
                                    }
                                    return label;
                                }
                            },
                            {
                                field: 'mode', title: '模式', align: 'center',
                                templet: function (d) {
                                    return getLabel(DataType.Mode, d.mode)
                                }
                            },
                            {field: 'sendContent', title: '发送内容', width: 250},
                        ]
                    ]
                    , page: false
                    , limit: Number.MAX_VALUE // 数据表格默认全部显示
                    , where: {
                        currentNavigationId: currentNavigationId
                    }
                    , parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": 0, //解析接口状态
                            "msg": "", //解析提示文本
                            "data": res.body //解析数据列表
                        };
                    }
                });

                // 监听【当前航线表】的操作
                table.on('tool(currentRouteTable)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'remove') {
                        if (currentModeStatus == MODE_STATUS_RUN) {
                            layer.msg("请先暂停航行！");
                            return;
                        }
                        layer.confirm('确定删除该航线？', function (index) {
                            $.ajax({
                                type: "POST",
                                url: ctx + "/navigation/deleteCurrentRoute",
                                contentType: "application/json",
                                dataType: "json",
                                data: requestDTO(data.id),
                                beforeSend: function () {
                                    this.layerIndex = showLoad();
                                },
                                complete: function () {
                                    closeLoad(this.layerIndex);
                                },
                                success: function (response) {
                                    if (response.result.code == 200) {
                                        layer.msg("操作成功", {
                                            timeout: 1000
                                        }, function () {
                                            // 关闭窗口
                                            layer.close(index);
                                        });
                                        // 重新加载表格
                                        table.reload('currentRouteTable');
                                    } else {
                                        layer.msg(response.result.message)
                                    }
                                },
                                error: function (e) {
                                    console.log("ERROR: ", e);
                                }
                            });
                        });
                    } else if (obj.event === 'modify') {
                        if (currentModeStatus == MODE_STATUS_RUN) {
                            layer.msg("请先暂停航行！");
                            return;
                        }
                        // 修改
                        layer.open({
                            //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                            type: 1,
                            title: "修改",
                            area: ['65%', '75%'],
                            scrollbar: false, // 父页面不滚动
                            content: $("#editRouteForm")//引用的弹出层的页面层的方式加载修改界面表单
                        });
                        setRouteFormValue(obj, data, null);
                    }
                });

                // 点击【新增航线】按钮
                $('#addRouteButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    // 获取航线表选中的数据
                    let checkDataList = table.checkStatus('currentRouteTable').data;
                    if (checkDataList.length > 1) {
                        layer.msg("只需选择一个航线点（在选择的点后面新增航线）", {
                            time: 5000
                        });
                        return;
                    }
                    // 选择的点
                    let preId = null;
                    if (checkDataList.length == 1) {
                        $.each(checkDataList, function (index,value,array){
                            if (value.is !== '') {
                                preId = value.id;
                            }
                        });
                    }
                    console.log("preId: " + preId);
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "新增（您也可以选择新增到某个航线点之后）",
                        area: ['65%', '75%'],
                        scrollbar: false, // 父页面不滚动
                        content: $("#editRouteForm")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    setRouteFormValue(null, null, preId);
                });

                /**
                 * 填充form（添加/修改航线的方法）
                 *
                 * @param obj 对象
                 * @param data 数据
                 * @param preId 上一个点的id
                 */
                function setRouteFormValue(obj, data, preId) {
                    // 先清空数据
                    if (data != null) {
                        $("#id").val(data.id);
                        $("#longitudeType").val(data.longitudeType);
                        $("#latitudeType").val(data.latitudeType);
                        $("#speed").val(data.speed);
                        // 先置空
                        $('#longitudeDegree').val('');
                        $('#longitudeMinute').val('');
                        $('#latitudeDegree').val('');
                        $('#latitudeMinute').val('');
                        // 经度回显成度数+分数
                        echoDegreeValue(data.longitude, "longitudeDegree", "longitudeMinute");
                        // 纬度回显成度数+分数
                        echoDegreeValue(data.latitude, "latitudeDegree", "latitudeMinute");
                        // 编辑的话是不带上一个点的id的
                        $('#preId').val(null);
                    } else {
                        $("#id").val('');
                        $("#longitudeDegree").val('');
                        $("#longitudeMinute").val('');
                        $("#latitudeDegree").val('');
                        $("#latitudeMinute").val('');
                        $("#speed").val('');
                        // 新增的时候，默认选中东经，北纬
                        $("#longitudeType").val('E');
                        $("#latitudeType").val('N');
                        // 新增的话才要带上一个点
                        $('#preId').val(preId);
                    }
                    layui.form.render();
                }

                /**新增、修改航线，点击确定按钮*/
                form.on('submit(currentRouteConfirm)', function (massage) {
                    // 经度的度
                    var longitudeDegree = $('#longitudeDegree').val();
                    var longitudeMinute = $('#longitudeMinute').val();
                    var latitudeDegree = $('#latitudeDegree').val();
                    var latitudeMinute = $('#latitudeMinute').val();
                    if (!checkLongitudeDegreeFormat(longitudeDegree, longitudeMinute)) {
                        return;
                    }
                    if (!checkLatitudeDegreeFormat(latitudeDegree, latitudeMinute)) {
                        return;
                    }
                    // 经度
                    var longitude = longitudeDegree + "°";
                    if (!isBlank(longitudeMinute)) {
                        longitude = longitude + longitudeMinute + "'";
                    }
                    // 纬度
                    var latitude = latitudeDegree + "°";
                    if (!isBlank(latitudeMinute)) {
                        latitude = latitude + latitudeMinute + "'";
                    }
                    // 给对象添加新字段
                    massage.field.longitude = longitude;
                    massage.field.latitude = latitude;

                    $.ajax({
                        url: ctx + '/navigation/addModifyCurrentRoute',
                        type: "POST",
                        contentType: "application/json",
                        dataType: "json",
                        data: requestDTO(massage.field),
                        beforeSend: function () {
                            this.layerIndex = showLoad();
                        },
                        complete: function () {
                            closeLoad(this.layerIndex);
                        },
                        success: function (data) {
                            if (data.result.code == 200) {
                                // 关闭所有弹窗
                                layer.closeAll();
                                // 操作成功
                                layer.msg("操作成功", {
                                    time: 1000
                                });
                                // 重新加载表格
                                table.reload('currentRouteTable');
                            } else {
                                layer.msg(data.result.message);
                            }
                        },
                        error: function (result) {
                            layer.msg("请求失败！");
                        }
                    });
                    return false;
                });

                // 导入表格
                $('#importExcelRouteButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    $('#importExcelRouteButtonReal').click(); //检查通过再选上传
                });

                // 真实的导入表格按钮
                upload.render({
                    elem: "#importExcelRouteButtonReal",//导入id
                    url: ctx + "/navigation/importRouteExcel",
                    size: '3072',
                    accept: "file",
                    exts: 'xls|xlsx|xlsm|xlt|xltx|xltm',
                    before: function (obj) {
                        if (currentModeStatus == MODE_STATUS_RUN) {
                            layer.msg("请先暂停航行！");
                            layer.stopPropagation();
                        }
                    },
                    done: function (data) {
                        if (data.result.code == 200) {
                            // 关闭所有弹窗
                            layer.closeAll();
                            // 操作成功
                            layer.msg("操作成功", {
                                time: 1000
                            });
                            // 重新加载表格
                            table.reload('currentRouteTable');
                        } else {
                            layer.msg(data.result.message);
                        }
                    }
                });

                // 点击【模式配置】按钮
                $('#modeConfigButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 2,
                        title: "模式参数配置",
                        area: ['80%', '90%'],
                        scrollbar: false, // 父页面不滚动
                        content: ctx + '/navigation/modeConfigFrame' //跳转页面
                    });
                });

                // 点击【串口配置】按钮
                $('#serialPortButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    js2Java({
                        "method": "winSerialPort"
                    });
                });

                // 点击【设定航线】按钮
                $('#setRouteButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    // 获取选中的数据对象
                    let checkDataList = table.checkStatus('currentRouteTable').data;
                    if (checkDataList.length === 0) {
                        layer.msg("请选择要将路线状态更改为【等待发送】的航线", {
                            time: 5000
                        });
                        return;
                    }
                    let idList = [];
                    $.each(checkDataList, function (index,value,array){
                        if (value.is !== '') {
                            idList.push(value.id);
                        }
                    });
                    layer.confirm('确定将这' + idList.length + '条航线的路线状态都更改成【等待发送】吗？', function (index) {
                        $.ajax({
                            url: ctx + '/navigation/setCurrentRoute',
                            type: "POST",
                            contentType: "application/json",
                            dataType: "json",
                            data: requestDTO(idList),
                            beforeSend: function () {
                                this.layerLogin = showLoad();
                            },
                            complete: function () {
                                closeLoad(this.layerLogin);
                            },
                            success: function (data) {
                                if (data.result.code == 200) {
                                    // 操作成功
                                    layer.msg("操作成功");
                                    // 延迟关闭
                                    setTimeout(function(){
                                        // 关闭所有弹窗
                                        layer.closeAll();
                                        // 重新加载航线表
                                        layui.table.reload('currentRouteTable');
                                    }, 330);
                                } else {
                                    layer.msg(data.result.message);
                                }
                            },
                            error: function (e) {
                                layer.msg("请求异常")
                            }
                        });
                    });
                });

                // 点击【批量删除】按钮
                $('#batchDeleteRouteButton').click(function () {
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        layer.msg("请先暂停航行！");
                        return;
                    }
                    // 获取航线表选中的数据
                    let checkDataList = table.checkStatus('currentRouteTable').data;
                    if (checkDataList.length === 0) {
                        layer.msg("请选择要删除的航线", {
                            time: 1000
                        });
                        return;
                    }
                    let idList = [];
                    $.each(checkDataList, function (index,value,array){
                        if (value.is !== '') {
                            idList.push(value.id);
                        }
                    });
                    layer.confirm('确定删除这' + idList.length + '条航线数据吗？', function (index) {
                        // 批量删除
                        $.ajax({
                            url: ctx + '/navigation/batchDeleteCurrentRoute',
                            type: "POST",
                            contentType: "application/json",
                            dataType: "json",
                            data: requestDTO(idList),
                            beforeSend: function () {
                                this.layerLogin = showLoad();
                            },
                            complete: function () {
                                closeLoad(this.layerLogin);
                            },
                            success: function (data) {
                                if (data.result.code == 200) {
                                    // 操作成功
                                    layer.msg("操作成功", {
                                        time: 1000
                                    });
                                    // 延迟关闭
                                    setTimeout(function(){
                                        // 关闭所有弹窗
                                        layer.closeAll();
                                        // 重新加载航线表
                                        layui.table.reload('currentRouteTable');
                                    }, 330);
                                } else {
                                    layer.msg(data.result.message);
                                }
                            },
                            error: function (e) {
                                layer.msg("请求异常")
                            }
                        });
                    });
                });

                $("#back").on('click', function () {
                    layer.closeAll();
                });

                // 点击大圆形动态图标
                $(".mode-button-click").on('click', function () {
                    // 打开窗口
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 2,
                        title: "切换模式",
                        area: ['50%', '50%'],
                        scrollbar: false, // 父页面不滚动
                        content: ctx + '/navigation/switchModeFrame' //跳转页面
                    });
                });

                /**
                 * 设置航线图标
                 *
                 * @param mode 航行模式
                 * @param modeStatus 航行状态
                 */
                function setModeCircle(mode, modeStatus) {
                    // 按钮是暂停还是继续
                    if (currentModeStatus == MODE_STATUS_RUN) {
                        $('#pauseOrContinueBtn').text('暂停');
                    } else {
                        $('#pauseOrContinueBtn').text('继续');
                    }

                    // 当前模式
                    if (typeof currentNavigationId == 'undefined' || currentNavigationId == null || currentNavigationId == '') {
                        $('#currentModeTxt').text('未指定');
                    } else {
                        if (currentMode == MODE_NAVIGATION) {
                            $('#currentModeTxt').text('航行模式');
                        } else if (currentMode == MODE_WANDER) {
                            $('#currentModeTxt').text('漂浮模式');
                        } else if (currentMode == MODE_ANCHOR) {
                            $('#currentModeTxt').text('锚泊模式');
                        } else if (currentMode == MODE_SINGLE_CIRCLE) {
                            $('#currentModeTxt').text('单点循环模式');
                        }
                    }

                    // 航向
                    $("#courseContent").text($('#commonCourse').val());

                    // 先把所有都置为隐藏
                    $('#circleStart').css('display', 'none');
                    $('#circleNavigationModeC').css('display', 'none');
                    $('#circleWanderMode').css('display', 'none');
                    $('#circleAnchorMode').css('display', 'none');
                    $('#circleSingleMode').css('display', 'none');
                    $('#circlePause').css('display', 'none');

                    if (typeof currentNavigationId == 'undefined' || currentNavigationId == null || currentNavigationId == '') {
                        // 如果未初始化, 展示开始启程按钮
                        $('#circleStart').css('display', 'inline');
                    } else {
                        // 其他情况
                        if (modeStatus == MODE_STATUS_RUN) {
                            if (mode == MODE_NAVIGATION) {
                                // 航行模式
                                $('#circleNavigationModeC').css('display', 'inline');
                            } else if (mode == MODE_WANDER) {
                                // 漂浮模式
                                $('#circleWanderMode').css('display', 'inline');
                            } else if (mode == MODE_ANCHOR) {
                                // 锚泊模式
                                $('#circleAnchorMode').css('display', 'inline');
                            } else if (mode == MODE_SINGLE_CIRCLE) {
                                // 单点循环
                                $('#circleSingleMode').css('display', 'inline');
                            }
                        } else if (modeStatus == MODE_STATUS_PAUSE) {
                            $('#circlePauseText').text('暂停中');
                            $('#circlePause').css('display', 'inline');
                        } else if (modeStatus == MODE_STATUS_STOP) {
                            // 如果为停止, 展示开始启程按钮
                            $('#circleStart').css('display', 'inline-block');
                        } else {
                            console.log("不支持的模式状态：" + modeStatus);
                        }
                    }
                }

                // 点击【航行】
                $('#startModeNavigationBtn').click(function () {
                    switchModeFunction(MODE_NAVIGATION, MODE_STATUS_RUN, currentNavigationId, false, NO_VALUE);
                });

                // 点击【漂浮】
                $('#startModeWanderBtn').click(function () {
                    switchModeFunction(MODE_WANDER, MODE_STATUS_RUN, currentNavigationId, false, NO_VALUE);
                });

                // 点击【手动漂浮】
                $('#startModeWanderByHandBtn').click(function () {
                    // 打开窗口
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 2,
                        title: "漂浮模式配置",
                        area: ['65%', '75%'],
                        scrollbar: false, // 父页面不滚动
                        content: ctx + '/navigation/setWanderPointByHandFrame' //跳转页面
                    });
                });

                // 点击【锚泊】
                $('#startModeAnchorBtn').click(function () {
                    switchModeFunction(MODE_ANCHOR, MODE_STATUS_RUN, currentNavigationId, false, NO_VALUE);
                });

                // 点击【手动锚泊】
                $('#startModeAnchorByHandBtn').click(function () {
                    // 打开窗口
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 2,
                        title: "手动设置锚泊点位（该点位不会保存到航线表中）",
                        area: ['65%', '75%'],
                        scrollbar: false, // 父页面不滚动
                        content: ctx + '/navigation/setAnchorPointByHandFrame' //跳转页面
                    });
                });

                // 点击【单点】
                $('#startModeSingleBtn').click(function () {
                    switchModeFunction(MODE_SINGLE_CIRCLE, MODE_STATUS_RUN, currentNavigationId, false, NO_VALUE);
                });

                // 点击【手动单点】
                $('#startModeSingleByHandBtn').click(function () {
                    layer.open({
                        type: 2,
                        title: "请选择单点模式要循环发送的点位（该点位不会保存到航线表中，并且值与锚泊模式不互通）",
                        area: ['80%', '90%'],
                        scrollbar: false, // 父页面不滚动
                        closeBtn: 0,// 没有右上角的叉叉按钮
                        content: ctx + '/navigation/setSinglePointByHandFrame' //跳转页面
                    });
                });

                // 点击停止按钮, 结束航行
                $('#stopBtn').click(function () {
                    switchModeFunction(currentMode, MODE_STATUS_STOP, currentNavigationId, false, NO_VALUE);
                });

                // 点击暂停或继续按钮
                $('#pauseOrContinueBtn').click(function () {
                    // 如果当前是暂停，则要变成继续（这里不更改手动模式的值）
                    if (currentModeStatus == MODE_STATUS_PAUSE) {
                        switchModeFunction(currentMode, MODE_STATUS_RUN, currentNavigationId, false);
                    } else {
                        switchModeFunction(currentMode, MODE_STATUS_PAUSE, currentNavigationId, false);
                    }
                });

                // 重新加载当前界面
                window.reloadPage =function () {
                    window.location.reload();
                };

                // 重新加载航线表
                window.reloadCurrentRouteTable = function(){
                    table.reload('currentRouteTable');
                };

                // 重新加载发送记录界面
                window.reloadSendDataTable = function(){
                    table.reload('currentSendDataTable');
                };

                window.setDisplayContent = function (paramText, color) {
                    if (paramText != null) {
                        if (typeof color != 'undefined' && color != null && color != '') {
                            $('#displayContent').text(paramText).css('color', color);
                        } else {
                            $('#displayContent').text(paramText);
                        }
                    }
                };

                window.setCourseContent = function (paramText, color) {
                    if (paramText != null) {
                        if (typeof color != 'undefined' && color != null && color != '') {
                            $('#courseContent').text(paramText).css('color', color);
                        } else {
                            $('#courseContent').text(paramText);
                        }
                    }
                };

                window.setSendPortData = function (sendGPGLL, sendGPRMC, sendGPVTG, sendGPGGA, sendTime) {
                    // 如果鼠标在发送数据的那个界面上，说明用户要赋值数据，则不刷新
                    if (mouseOnSendDataFlag) {
                        return;
                    }
                    if (sendTime != '' && sendTime != null) {
                        $('#sendPortTime').text(sendTime);
                    } else {
                        $('#sendPortTime').text('');
                    }
                    // sendGPGLL
                    if (sendGPGLL != '' && sendGPGLL != null) {
                        $('#sendGPGLL').text(sendGPGLL);
                    } else {
                        $('#sendGPGLL').text('');
                    }
                    // sendGPRMC
                    if (sendGPRMC != '' && sendGPRMC != null) {
                        $('#sendGPRMC').text(sendGPRMC);
                    } else {
                        $('#sendGPRMC').text('');
                    }
                    // sendGPVTG
                    if (sendGPVTG != '' && sendGPVTG != null) {
                        $('#sendGPVTG').text(sendGPVTG);
                    } else {
                        $('#sendGPVTG').text('');
                    }
                    // sendGPGGA
                    if (sendGPGGA != '' && sendGPGGA != null) {
                        $('#sendGPGGA').text(sendGPGGA);
                    } else {
                        $('#sendGPGGA').text('');
                    }
                };

                //绑定鼠标进入事件
                $('#sendDataView').mouseenter(function() {
                    mouseOnSendDataFlag = true;
                });
                // 绑定鼠标划出事件
                $('#sendDataView').mouseleave(function() {
                    mouseOnSendDataFlag = false;
                });

            });

        </script>

    </body>
</html>